<template>
  <div class="activity-management-container">

    <h1>活动管理</h1>
    <a-table :dataSource="activities" :columns="columns" class="table-container">
      <template #action="{ record }">
        <a-button type="link" @click="showDetails(record.activityId)">详情</a-button>
      </template>
    </a-table>

    <a-modal v-model:visible="detailsModalVisible" title="活动详情" @ok="handleOk" @cancel="handleCancel">
      <p><strong>活动名称:</strong> {{ activityDetails?.activity?.name }}</p>
      <p><strong>地点:</strong> {{ activityDetails?.activity?.location }}</p>
      <p><strong>时间:</strong> {{ activityDetails?.activity?.time }}</p>
      <p><strong>内容:</strong> {{ activityDetails?.activity?.content }}</p>
      <p><strong>活动学分:</strong> {{ activityDetails?.activity?.xuefen }}</p>
      <p><strong>参与活动人数:</strong>{{activityDetails?.volunteers?.length}}</p>
      <p><strong>志愿者:</strong></p>
      <ul>
        <li v-for="volunteer in activityDetails?.volunteers" :key="volunteer.userId">
          {{ volunteer.name }} ({{ volunteer.phone }})
        </li>
      </ul>
      <a-button v-if="isAdmin" @click="deleteActivity(activityDetails?.activity?.activityId)">删除</a-button>
    </a-modal>

<!--    <a-button @click="goBack" class="back-button">返回主页</a-button>-->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from '../api/request.ts';
import { Table as aTable, Modal as aModal, Button as aButton, message } from 'ant-design-vue';
import { useUserStore } from '../stores/user.ts';
import router from "@/router/index.ts";

const activities = ref([]);
const activityDetails = ref(null);
const detailsModalVisible = ref(false);
const userStore = useUserStore();
const isAdmin = ref(userStore.userType === 'event_administrator');

const columns = [
  { title: '活动名称', dataIndex: 'name', key: 'name' },
  { title: '地点', dataIndex: 'location', key: 'location' },
  { title: '时间', dataIndex: 'time', key: 'time' },
  { title: '内容', dataIndex: 'content', key: 'content' },
  { title: '审核状态', dataIndex: 'reviewStatus', key: 'reviewStatus' },
  {
    title: '详情',
    key: 'action',
    slots: { customRender: 'action' },
  },
];

const fetchActivities = async () => {
  try {
    const response = await axios.get('/activities');
    activities.value = response.data;
  } catch (error) {
    console.error('Error fetching activities:', error);
  }
};

const showDetails = async (activityId) => {
  try {
    const response = await axios.get(`/activities/${activityId}`);
    activityDetails.value = response.data;
    detailsModalVisible.value = true;
  } catch (error) {
    console.error('Error fetching activity details:', error);
  }
};

const handleOk = () => {
  detailsModalVisible.value = false;
};

const handleCancel = () => {
  detailsModalVisible.value = false;
};

const deleteActivity = async (activityId) => {
  try {
    await axios.delete(`/activities/${activityId}`);
    message.success('活动删除成功');
    detailsModalVisible.value = false;
    fetchActivities();
  } catch (error) {
    console.error('Error deleting activity:', error);
    message.error('活动删除失败');
  }
};

// const goBack = () => {
//   router.push('/home');
// };

fetchActivities();
</script>

<!--<style scoped>-->
<!--/* 外层容器，用于包裹整个活动管理内容，使内容居中 */-->
<!--.activity-management-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;  /* 使内容垂直排列 */-->
<!--  align-items: center;     /* 水平居中 */-->
<!--  padding: 20px;           /* 容器内填充 */-->
<!--  background-color: #f0f2f5; /* 背景颜色 */-->
<!--}-->

<!--.logo {-->
<!--  width: 100px;             /* 设置logo图片的宽度 */-->
<!--  margin-bottom: 20px;      /* 图片下方的间距 */-->
<!--}-->

<!--/* 标题居中 */-->
<!--h1 {-->
<!--  text-align: center;      /* 文本居中 */-->
<!--  margin-bottom: 40px;     /* 标题下方的间距 */-->
<!--}-->

<!--/* 表格容器，限制表格宽度并使其居中 */-->
<!--.table-container {-->
<!--  width: 100%;-->
<!--  max-width: 800px;        /* 最大宽度 */-->
<!--  background-color: white; /* 表格背景色 */-->
<!--  padding: 20px;           /* 表格容器内填充 */-->
<!--  border-radius: 8px;      /* 圆角 */-->
<!--  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影 */-->
<!--}-->

<!--/* 返回主页按钮样式 */-->
<!--.back-button {-->
<!--  margin-top: 20px;        /* 按钮顶部间距 */-->
<!--}-->
<!--</style>-->
